<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/datils.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common-part.css">
</head>
<body>
    <!-- 商品详情页面 -->
    <!-- 页面头部位置 -->
    <div class="header">
        <div class="header-frist">
            <img src="../image/logo.png" class="header-logo">
        </div>
        <div class="header-c">
            <ul class="header-items">
                <li class="item-list actived"><a  href="#" class="item-link">首页</a></li>
                <li class="item-list left"><a  href="#" class="item-link">女装</a></li>
                <li class="item-list  left"><a href="#"  class="item-link">男装</a></li>
                <li class="item-list left"><a  href="#" class="item-link">箱包</a></li>
                <li class="item-list left"><a  href="#" class="item-link">配饰</a></li>
            </ul>
            <input type="text" class="header-seacher" placeholder="搜索商品名/商品编号">
            <div class="header-right">
                <a href="#" class="right-link"><img src="../image/like.png" class="right-img"></a>
                <a href="#" class="right-link"><img src="../image/shopping.png" class="right-img"></a>
                <a href="#" class="right-link"><img src="../image/person.png" class="right-img"></a>
            </div>
        </div>
    </div>
    <!-- 详情主体内容部分 -->
<div class="datail-content">
    <div class="shop-content">
        <div class="broadcast-map">
            <ul class="broadcast-list">
                <li class="broadcast-item up-and-down">
                    <a href="#" class="broadcast-link"><img src="../image/up.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item">
                    <a href="#" class="broadcast-link"><img src="../image/broadcast1.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item">
                    <a href="#" class="broadcast-link"><img src="../image/broadcast2.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item">
                    <a href="#" class="broadcast-link"><img src="../image/broadcast4.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item">
                    <a href="#" class="broadcast-link"><img src="../image/broadcast3.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item">
                    <a href="#" class="broadcast-link"><img src="../image/broadcast4.png" class="broadcast-img"></a>
                </li>
                <li class="broadcast-item up-and-down">
                    <a href="#" class="broadcast-link"><img src="../image/down.png" class="broadcast-img"></a>
                </li>
            </ul>
        </div>
        <div class="big-map">
            <a class="map-link" href="#"><img class="map-img" src="../image/big-map.png"></a>
        </div>
        <!-- 商品参数详情 -->
        <div class="shop-info">
            <div class="shop-title">
                <a class="title-link" href="#">女装外套 牛仔短茄克 春季上新 牛仔外套 水洗产品【100%棉】448126</a>
            </div>
            <!-- 商品价格 -->
            <div class="shop-price">
                <a class="now-price" href="#">¥399.00</a>
                <a class="old-price" href="#">初上市价格¥499.00</a>
            </div>
            <!-- 商品颜色和数量 -->
            <div class="shop-cli">
                <div class="shop-color">
                    <p class="shop-title">颜色：</p>
                    <div class="color-black">
                        <span class="color-pick "></span>
                        <span class="color-pick color-1"></span>
                        <span class="color-pick color-2"></span>
                        <span class="color-pick color-3"></span>
                    </div>
                </div>
                <div class="count-black">
                    <p class="count-title">数量：</p>
                    <div class="count-box">
                    <button class="btn-ins">+</button>
                    <input class="count-input" type="text" placeholder="1">
                    <button class="btn-rdu">-</button>
                </div>
            </div>
            </div>
            <div class="clear"></div>
            <!-- 商品的sku -->
            <div class="shop-size">
                <ul class="shop-sizelist">
                    <li class="sizelist-item"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item margin-left-22"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item margin-left-22 active"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item margin-left-22"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item margin-left-22"><span class="item-desc">150/76A/XS</span></li>
                    <li class="sizelist-item margin-left-22"><span class="item-desc">150/76A/XS</span></li>
                </ul>
            </div>
            <div class="clear"></div>
            <!-- 商品的配送方式 -->
            <div class="shop-send">
                配送方式：
                <label class="send-main">   
                 <input type="radio" name="send-type" class="send-type" checked>
                 <a class="icon"></a>快速配送
                </label>
                <label class="send-main" >
                    <input type="radio" name="send-type" class="send-type">
                    <a class="icon"></a>门店自提
                </label>
            </div>
            <div class="clear"></div>
            <!-- 商品的收藏和分享 -->
            <div class="shop-collect-share">
                <div class="shop-http">
                    <span class="shop-day">支持30天无理由退换货</span>
                </div>
                <div class="collect-share">
                <div class="collect-box">
                    <img class="collect-img" src="../image/like.png" alt="">
                    <a href="#" class="collect">收藏</a>
                </div>
               <div class="share-box">
                   <img src="../image/share.png" class="share-img">
                    <a href="#" class="share">分享</a>
               </div>
                </div>
            </div>
            <div class="clear"></div>
            <!-- 商品购买选择方式 -->
            <div class="shop-buyorcart">
                <div class="shop-buy">
                    <a href="#" class="shop-link1">立即购买</a>
                </div>
                <div class="shop-cart">
                    <a href="#" class="shop-link2">加入购物车</a>
                </div>
            </div>
        </div>
    </div>

    </div>
    <div class="clear"></div>
    <!-- 商品的详细介绍表格部分 -->
   
        <div class="product-model">
            <div class="product-title active">
                <a href="#" class="product-link">商品详情</a>
            </div>
            <div class="product-title margin-left-right">
                <a href="#" class="product-link ">商品评价</a>
            </div>
            <div class="product-title">
                <a href="#"  class="product-link">购买咨询 </a>
        </div>
        <div class="clear"></div>
        <!-- 产品参数列表 -->
        <div class="product-param">
            <p class="param-title">产品参数：</p>
            <p class="p-desc location1">产品货号：448126000</p>
            <p class="p-desc location2">商品颜色：00白色  10水粉色  54绿色  67蓝色</p>
            <p class="p-desc location3">上市季节：2022年春季</p>
            <p class="p-desc location4">商品材质：[面料]尼龙100%，[亲里]聚酯纤维100%， [填充物]聚酯纤维100%，[包边]尼龙100%</p>
            <p class="p-desc location5">商品尺码：150/76A/XS  155/80A/S  160/84A/M
                160/88A/L  165/92A/XL  170/100B/XXL
                175/108C/3XL</p>
    </div>
   
</div>
 <!-- 产品展示 -->
    <div class="product-display">
       <div class="display-title">产品展示</div> 
       <img class="display-img" src="../image/display.png" alt="展示图片">
    </div>
    <!-- 商品尺寸 -->
    <div class="product-size">
        <div class="size-title">商品尺寸</div> 
        <img class="size-img" src="../image/product-size.png" alt="展示图片">
     </div>
     <!-- 商品细节 -->
     <div class="product-d">
        <div class="d-title">产品细节</div> 
        <img class="d-img1" src="../image/product-display1.png" alt="展示图片">
        <img class="d-img2" src="../image/product-display2.png" alt="展示图片">
     </div>
     <!-- 商品说明 -->
     <div class="product-desc">
        <div class="desc-title">产品细节</div> 
        <img class="desc-img1" src="../image/product-shouming.png" alt="展示图片">
        <img class="ddesc-img2" src="../image/product-attention.png" alt="展示图片">
     </div> 
      <div class="clear"></div>
     <!-- 商品推荐 -->
     
     
     <div class="content-product">
         <div class="product-recommend">商品推荐</div> 
       
        <ul class="product-items">
            <li class="item-list">
                <a class="item-link" href="#">
                    <img  class="product-img" src="../image//product-tuijian.png">
                    <p class="product-dc">设计师合作款·千鸟格大衣  冬季上新【羊毛】 </p>
                    <p class="product-sz">【S-XL】</p>
                    <span class="product-preice">¥799</span>
                    <img class="product-islike" src="../image/like.png">
                    <img class="product-cart" src="../image/shopping.png">
                </a>
            </li>
            <li class="item-list margin-left-right">
                <a class="item-link" href="#">
                    <img  class="product-img" src="../image//product-tuijian.png">
                    <p class="product-dc">设计师合作款·千鸟格大衣  冬季上新【羊毛】 </p>
                    <p class="product-sz">【S-XL】</p>
                    <span class="product-preice">¥799</span>
                    <img class="product-islike" src="../image/like.png">
                    <img class="product-cart" src="../image/shopping.png">
                </a>
            </li>
            <li class="item-list">
                <a class="item-link" href="#">
                    <img  class="product-img" src="../image//product-tuijian.png">
                    <p class="product-dc">设计师合作款·千鸟格大衣  冬季上新【羊毛】 </p>
                    <p class="product-sz">【S-XL】</p>
                    <span class="product-preice">¥799</span>
                    <img class="product-islike" src="../image/like.png">
                    <img class="product-cart" src="../image/shopping.png">
                </a>
            </li>  
        </ul>
    </div>
<!-- 底部区域 -->
<div class="footer">
    <div class="footer-c">
       <a class="footer-link"> <img class="link-img" src="../image/logo.png"></a>
       <ul class="type-list">
        <li class="items">
            <a href="#" class="items-link">门店资讯</a>
        </li>
        <li class="items-line">|</li>
        <li class="items">
            <a href="#" class="items-link">网络购物FAQ</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">关于BALANCE</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">电子报订阅</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">买卖定型化契约</a>
        </li>
        <li class="items-line">|</li>        
        <li class="items">
            <a href="#" class="items-link">政府令宣传</a>
        </li>  
    </ul>
    <p class="footer-c-desc">
      <a class="link-desc" href="#">Copyright © BALANCE Ltd. All rights reserved</a>  
    </p>
    <div class="footer-box">
    <a class="footer-tdc"> <img class="link-img" src="../image/logo-erweima .png"></a>
    <a class="footer-tdc"> <img class="link-img" src="../image/erweima.png"></a>
    </div>
</div>
</div>
</body>
</html>